<template>
  <el-form :inline="true" >
    <el-form-item>
      <el-input
        v-model="port"
        placeholder="请输入端口号"
        style="width: 120px;"
        type="number"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleHttpService" :loading="serviceLoading">
        {{ isServiceRunning ? '停止服务' : '启动服务' }}
      </el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="showDevTool">devTool</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="showWorkDir">存档路径</el-button>
    </el-form-item>

    <div v-if="serviceUrl.length > 0" class="service-url">
      服务地址:
      <div v-for="v in serviceUrl">
        <el-link  type="primary" :href="v" target="_blank">{{ v }}</el-link>
      </div>
    </div>

  </el-form>
  <el-form :inline="true" style="margin-top:20px">
    <el-form-item>
      <el-input
        v-model.number="broadCastPort"
        placeholder="请输入端口号"
        style="width: 120px;"
        type="number"
      />
    </el-form-item>
    <el-form-item>
      <el-select v-model="broadCastNetIfId" placeholder="选择网卡" style="width: 200px">
        <el-option label="自动" value="0"></el-option>
        <el-option
          v-for="item in netList"
          :key="item.ifIndex"
          :label="item.name+'-'+item.ipv4"
          :value="item.ifIndex"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="beginUdpBroadCast"
        :loading="isUdpBroadCastLoading"
      >
        {{ isUdpBroadCastRun ? '关闭广播' : '开启广播' }}
      </el-button>
    </el-form-item>
  </el-form>
  <el-form :inline="true" style="margin-top:20px">
    <el-form-item>
      <el-input
        v-model.number="udpClientPort"
        placeholder="请输入端口号"
        style="width: 120px;"
        type="number"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="beginUdpClient"
        :loading="isUdpBroadCastLoading"
      >
        {{ isUdpClientRun ? '取消监听' : '监听端口' }}
      </el-button>
    </el-form-item>
    <div>
      <p v-for="v in broadCastMsg" >{{v}}}</p>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from 'vue'
import {netList} from "@/global/store.ts";
import type { NetIf } from 'main/types/interfaces.d.ts'

const port = ref(4000)
const serviceLoading = ref(false)
const isServiceRunning = ref(false)
const serviceUrl = ref<string[]>([])

const handleHttpService = async () => {
  try {
    serviceLoading.value = true
    if (!isServiceRunning.value) {
      await window.electron.startHttpService(port.value)
      isServiceRunning.value = true
      serviceUrl.value = []
      netList.value.map((item: NetIf) => {
        if (item.status  == "Up") {
          serviceUrl.value.push(`http://${item.ipv4}:${port.value}/ping`)
        }
      })
      ElMessage.success('服务启动成功')
    } else {
      await window.electron.stopHttpService()
      isServiceRunning.value = false
      serviceUrl.value = []
      ElMessage.success('服务已停止')
    }
  } catch (error) {
    console.error('服务操作失败:', error)
    ElMessage.error('服务操作失败')
  } finally {
    serviceLoading.value = false
  }
}


const isUdpBroadCastRun = ref(false)
const isUdpBroadCastLoading = ref(false)
const broadCastNetIfId = ref("")
const broadCastPort = ref(40001)
const beginUdpBroadCast = async () => {
  if (isUdpBroadCastRun.value) {
    await window.electron.stopBroadCast()
    isUdpBroadCastRun.value = false
  } else {
    await window.electron.startBroadCast(broadCastNetIfId.value, broadCastPort.value)
    isUdpBroadCastRun.value = true
  }
}

const isUdpClientRun = ref(false)
const udpClientPort = ref(40001)
const broadCastMsg = ref<string[]>([])
const beginUdpClient = async () => {
  if (isUdpClientRun.value) {
    await window.electron.stopClient()
    isUdpClientRun.value = false
  } else {
    await window.electron.beginClient(udpClientPort.value)
    isUdpClientRun.value = true
  }
}

const onUdpMsg = (e:unknown, msg: string, info: any)=>{
  console.log(msg, info)
  broadCastMsg.value.push(`广播消息：${msg}, ${JSON.stringify(info)}`)
}

onMounted(()=>{
  window.electron.addIpcListener("broadcast", onUdpMsg)
})

onUnmounted(()=>{
  window.electron.delIpcListener("broadcast", onUdpMsg)
  window.electron.stopClient()
  window.electron.stopBroadCast()
})

const showDevTool = ()=>{
  window.electron.showDevTool()
}
const showWorkDir = ()=>{
  window.electron.openWorkspace()
}
</script>
